<html>
<link rel="stylesheet" href="/api-ui/static/bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="/api-ui/static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/api-ui/static/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="/api-ui/static/css/common/box.css" />
<link rel="stylesheet" type="text/css" href="/api-ui/static/css/common/checkbox.css" />
<!--vue脚本库-->
<script type="text/javascript"
		src="/api-ui/static/js/vue/vue-3.2.4.global.js">
</script>
<!--axios脚本库-->
<script type="text/javascript"
		src="/api-ui/static/js/vue/axios-0.18.0.min.js">
</script>
<!--我们自己封装的axios函数库 -->
<script type="text/javascript"
		src="/api-ui/static/js/vue/axios-helper.js">
</script>
<style type="text/css">
a {
	color: black;
}

a:hover {
	text-decoration: none;
}

.bgc-w {
	background-color: #fff;
}
.paixu:HOVER{
	cursor: pointer;
	color:#337ab7;
}

</style>
<body id="app">
	<div class="row" style="padding-top: 10px;">
		<div class="col-md-2">
			<h1 style="font-size: 24px; margin: 0;" class="">通知管理</h1>
		</div>
		<div class="col-md-10 text-right">
			<a href="index"><span class="glyphicon glyphicon-home"></span> 首页</a> >
			<a disabled="disabled">通知管理</a>
		</div>
	</div>

	<div class="row" style="padding-top: 15px;">
		<div class="col-md-12 thistable">
			<!--id="container"-->
<div class="bgc-w box box-primary">
	<!--盒子头-->
	<div class="box-header">
		<h3 class="box-title">
			<a href="informadd.html" class="label label-success"
				style="padding: 5px;"> <span class="glyphicon glyphicon-plus"></span>
				新增
			</a>
			<a href="" class="label label-success" style="padding: 5px;margin-left:5px;">
				<span class="glyphicon glyphicon-refresh"></span> 刷新
			</a>
		</h3>
		<div class="box-tools">
			<div class="input-group" style="width: 150px;">
				<input type="text" class="form-control input-sm baseKey" placeholder="按标题查找" value=""/>
				<div class="input-group-btn">
					<a class="btn btn-sm btn-default baseKetsubmit"><span
						class="glyphicon glyphicon-search"></span></a>
				</div>
			</div>
		</div>
	</div>
	<!--盒子身体-->
	<div class="box-body no-padding">
		<div class="table-responsive">
			<table class="table table-hover">
				<tr>
					<th scope="col"><span class="paixu thistype">类型
						</span></th>
					<th scope="col"><span class="paixu thisstatus">状态
						</span></th>
					<th scope="col">标题</th>
					<th scope="col"><span class="paixu thistime">发布时间
						</span></th>
					<th scope="col">发布人</th>
					<th scope="col">部门</th>
					<th scope="col">置顶</th>
					<th scope="col">链接</th>
					<th scope="col">操作</th>
				</tr>
				<tr v-for="list	in aoaNoticeListlist">
					<td>{{typeZh(list.typeId)}}</td>
					<td>
						<span class="label label-info" v-if="list.statusId==14">{{statusId(list.statusId)}}</span>
						<span class="label label-warning" v-else-if="list.statusId==15">{{statusId(list.statusId)}}</span>
						<span class="label label-danger" v-else-if="list.statusId==16">{{statusId(list.statusId)}}</span>
					</td>
					<td><span>{{list.title}}</span></td>
					<td><span>{{list.noticeTime}}</span></td>
					<td><span>{{list.aoaUser.userName}}</span></td>
					<td><span>{{list.aoaDept.deptName}}</span></td>
					<td><span class="labels"><label><input
								type="checkbox" checked disabled><i>✓</i></label></span></td>

					<td><span class="glyphicon glyphicon-link"></span></td>

					<td><a href="informedit.html?id=26" class="label xiugai">
						<span class="glyphicon glyphicon-edit" @click="xg(list.noticeId)">
							修改
						</span>
						</a>
						<a class="label xiugai "><span
						class="glyphicon glyphicon-search" @click="ck(list.noticeId)">查看</span></a>
						<a class="label shanchu"><span @click="deleteId(list.noticeId)" class="glyphicon glyphicon-remove">
							删除
						</span></a></td>
				</tr>
			</table>
		</div>
	</div>
	<!--盒子尾-->
<div class="box-footer no-padding" style="margin-top: -20px;">
	<div style="padding: 5px;">
		<div id="page"
			style="background: #fff; border: 0px; margin-top: 0px; padding: 2px; height: 25px;">
			<div style="width: 40%; float: left;">
				<div class="pageInfo" style="margin-left: 5px;">
					共<span>{{total}}</span>条 | 每页<span>{{page.size}}</span>条
					| 共<span>{{jy}}</span>页
				</div>
			</div>
			<div style="width: 60%; float: left;">
				<div class="pageOperation">
				<!--判断是否是第一页  -->
					<a class="btn btn-sm btn-default no-padding tablefirst"	style="width: 30px; height: 20px;">
						<span class="glyphicon glyphicon-backward" @click="sey()"></span></a>
					<a class="btn btn-sm btn-default no-padding tableup"  style="width: 30px; height: 20px;">
						<span class="glyphicon glyphicon-triangle-left" @click="syy()"></span></a>
				<a disabled="disabled" class="btn btn-default no-padding" style="width: 30px; height: 20px;">
						{{this.page.current}}
				</a>
				<!--判断是否是最后一页  -->
					<a class="btn btn-sm btn-default no-padding tabledown"  style="width: 30px; height: 20px;">
						<span class="glyphicon glyphicon-triangle-right" @click="xyy()"></span></a>
					<a class="btn btn-sm btn-default no-padding tablelast"  style="width: 30px; height: 20px;">
						<span class="glyphicon glyphicon-forward" @click="xey()"></span></a>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
		/* 分页插件按钮的点击事件 */
		/* url是从后台接收过来的链接，sort是记录排序规则 */
		$('.tablefirst').on('click',function(){
			 if(true==false){
				 $('.thistable').load('infrommanagepaging?page=0');
			 }
		});
		$('.tableup').on('click',function(){
			 if(true==false){
				 $('.thistable').load('infrommanagepaging?page=-1');
			 }
		});
		$('.tabledown').on('click',function(){
			if(true==false){
				$('.thistable').load('infrommanagepaging?page=1');
			 }
		});
		$('.tablelast').on('click',function(){
			if(true==false){
				$('.thistable').load('infrommanagepaging?page=0');
			 }
			
		});
		
		/*类型、状态、时间的排序  */
		$('.thistype').on('click', function() {
			if ($(this).children().hasClass('glyphicon-triangle-bottom')) {
				$('.thistable').load('infrommanagepaging?type=0&icon=glyphicon-triangle-top');
			} else {
				$('.thistable').load('infrommanagepaging?type=1&icon=glyphicon-triangle-bottom');
			}
		});
		$('.thisstatus').on('click', function() {
			if ($(this).children().hasClass('glyphicon-triangle-bottom')) {
				$('.thistable').load('infrommanagepaging?status=0&icon=glyphicon-triangle-top');
			} else {
				$('.thistable').load('infrommanagepaging?status=1&icon=glyphicon-triangle-bottom');
			}
		});
		$('.thistime').on('click', function() {
			if ($(this).children().hasClass('glyphicon-triangle-bottom')) {
				$('.thistable').load('infrommanagepaging?time=0&icon=glyphicon-triangle-top');
			} else {
				$('.thistable').load('infrommanagepaging?time=1&icon=glyphicon-triangle-bottom');
			}
		});
		$('.thisvisit').on('click', function() {
			if ($(this).children().hasClass('glyphicon-triangle-bottom')) {
				$('.thistable').load('infrommanagepaging?visitnum=0&icon=glyphicon-triangle-top');
			} else {
				$('.thistable').load('infrommanagepaging?visitnum=1&icon=glyphicon-triangle-bottom');
			}
		});
		/* 查找 */
		$('.baseKetsubmit').on('click', function() {
			var baseKey = $('.baseKey').val();
			console.log(baseKey);
			$('.thistable').load('infrommanagepaging?baseKey='+baseKey+'');
		});
</script></div>

<!-- <script type="text/javascript" src="js/common/sort.js" charset='utf-8'></script> -->		</div>
	</div>
</body>
<script type="module">
	Vue.createApp({
		//数据绑定
		data(){
			return{
				//共有多少条记录
				total:null,
				//共有几页
				jy:null,
				//最大页码
				maxPage:null,
				//绑定的数据
				aoaNoticeListlist:[],
				aoaNoticeList:{
					noticeId:null,

					content:null,

					isTop:null,

					modifyTime:null,

					noticeTime:null,

					statusId:null,

					title:null,

					typeId:null,

					url:null,

					userId:null,
					//用户
					aoaUser:{
						userName:null
					},
					//部门
					aoaDept:{
						deptName:null
					}
				},
				page:{
					current: 1,
					size: 10
				}
			}
		},
		//此函数在vue对象创建之后，data、监听、methods...等初始化完毕之后调用此函数
		created(){
			this.queryList();
		},
		methods:{
			queryList(){
				requestGet("/api-core/aoaNoticeList/queryList",this.page)
						.then((data)=>{
							// console.info("*** data",data);
							this.total = data.total;
							this.aoaNoticeListlist = data.records;
							this.jy = this.total / this.page.size;
							// console.info("*** aoaNoticeListlist",this.aoaNoticeListlist);
							// 向上取整(总记录数/每页显示记录数) = 最大页码
							let maxPage =
									Math.ceil(data.total / data.size);
							console.info("*** 最大页码",this.maxPage)
							//将最大页码设置到模型层
							this.maxPage = maxPage;
						});
			},
			typeZh(typeId){
				if(typeId == 10){
					return '公告';
				}
				if(typeId == 11){
					return '通知';
				}
				if(typeId == 12){
					return '投票';
				}
			},
			statusId(statusId){
				if(statusId == 14){
					return '一般';
				}
				if(statusId == 15){
					return '重要';
				}
				if(statusId == 16){
					return '紧急';
				}
			},
			//上一页
			syy(){
				console.info("*** 上一页")
				//控制 当前页码-1 后始终不小于 1
				let current = this.page.current;
				current = (current - 1) < 1 ? 1 : (current - 1);
				//将当前页码设置到模型层
				this.page.current = current;
				this.queryList();
			},
			//上二页
			sey(){
				console.info("*** 上一页")
				//控制 当前页码-1 后始终不小于 1
				let current = this.page.current;
				current = (current - 2) < 1 ? 1 : (current - 2);
				//将当前页码设置到模型层
				this.page.current = current;
				this.queryList();
			},
			//下一页
			xyy(){
				//控制 当前页码+1 后始终不超过最大页码
				let current = this.page.current;
				current = (current + 1) > this.maxPage ? this.maxPage : (current + 1);
				//将当前页码设置到模型层
				this.page.current = current;
				this.queryList();
			},
			//下二页
			xey(){
				//控制 当前页码+1 后始终不超过最大页码
				let current = this.page.current;
				current = (current + 2) > this.maxPage ? this.maxPage : (current + 2);
				//将当前页码设置到模型层
				this.page.current = current;
				this.queryList();
			},
			//删除
			deleteId(id){
				console.info("*** 删除",id);
				let a = confirm("确定删除吗？")
				if(a){
					console.info("*** 要开始删除了");
					requestDelete("/api-core/aoaNoticeList/deleteId",{
						noticeId:id
					}).then((data)=>{
						this.queryList();
					});
				}else{
					return;
				}
			},
			ck(noticeId){
				sessionStorage.setItem("noticeId",noticeId);
				window.location.href="/api-ui/page/informshow.html";
			},
			xg(noticeId){
				sessionStorage.setItem("noticeId",noticeId);
				window.location.href="/api-ui/page/informedit.html";
			}
		}
	}).mount("#app");
</script>
</html>